import { Button, Form, Input, Modal, Pagination, Select, Table } from 'antd'
import styles from './index.module.scss'
import { useEffect, useState } from 'react'
import { SyncOutlined } from '@ant-design/icons'
import { profileAPI } from '@/apis'

export default () => {
  const [data, setData] = useState(() => {
    return {
      level: null,
      keyword: null,
      totalList: [],
      page: 1,
      size: 20,
      total: 100,
      list: [],
      visible: false,
      detailData: null,
    }
  })

  const loadList = async () => {
    const filterList = data.totalList.filter((row) => {
      if (data.keyword && row.name.indexOf(data.keyword) === -1) {
        return false
      }
      if (data.level && row.level !== data.level) {
        return false
      }
      return true
    })
    data.total = filterList.length
    data.list = filterList.slice((data.page - 1) * data.size, data.page * data.size)
    setData({ ...data })
  }

  const search = () => {
    data.page = 1
    setData({
      ...data,
      page: 1,
    })
    loadList()
  }

  useEffect(() => {
    // const res = await profileAPI.getEnterpriseProfileResult('/enterprise/profile/result')
    // if(res.code === 0){
    //     data.totalList = res.data.list
    // }
    data.totalList = []
    loadList()
  }, [])

  const openDetailDialog = (row) => {
    console.log(1111, row)
    // TODO: 调用明细接口获取数据
    setData({
      ...data,
      visible: true,
      detailData: null,
    })
    console.log(1111)
  }

  const columns = [
    { title: 'id', width: '50px', dataIndex: 'id', key: 'id' },
    { title: '企业名称', width: '100px', dataIndex: 'name1', key: 'name1' },
    { title: '企业档案画像', width: '100px', dataIndex: 'name2', key: 'name2' },
    { title: '消防培训', width: '100px', dataIndex: 'name3', key: 'name3' },
    { title: '消防演练', width: '100px', dataIndex: 'name4', key: 'name4' },
    { title: '员工违规', width: '100px', dataIndex: 'name5', key: 'name5' },
    { title: '车辆违规', width: '100px', dataIndex: 'name6', key: 'name6' },
    { title: '设备维护', width: '100px', dataIndex: 'name7', key: 'name7' },
    { title: '消防资产保养', width: '100px', dataIndex: 'name8', key: 'name8' },
    { title: '综合得分', width: '100px', dataIndex: 'name9', key: 'name9' },
    { title: '安全等级', width: '100px', dataIndex: 'name0', key: 'name10' },
    { title: '排名', width: '100px', dataIndex: 'name11', key: 'name11' },
    {
      title: '操作',
      width: '100px',
      dataIndex: 'name12',
      key: 'name12',
      render: (_, record) => (
        <>
          <Button size="small" color="default" type="link" onClick={() => openDetailDialog(record)}>
            详情
          </Button>
        </>
      ),
    },
  ]

  const handleChangeSize = (page, pageSize) => {
    ;(data.page = page), (data.size = pageSize)
    setData({
      ...data,
      size: pageSize,
      page: page,
    })
    loadList()
  }

  const onChangeKeyword = (e) => {
    setData({
      ...data,
      keyword: e.target.value,
    })
  }

  const onChangeLevel = (e) => {
    setData({
      ...data,
      level: e,
    })
  }

  const handleChangeVisible = (visible) => {
    setData({
      ...data,
      visible,
    })
  }

  return (
    <div className={styles.page}>
      <div className={styles.header}>
        <div className={styles.title}>园区画像评估结果</div>
        <div className={styles.search}>
          <span style={{ lineHeight: '32px', marginRight: 8 }}>安全等级</span>
          <Select style={{ width: 100 }} placeholder="请选择" allowClear value={data.level} onChange={onChangeLevel}>
            <Select.Option value={1}>优秀</Select.Option>
            <Select.Option value={2}>合格</Select.Option>
            <Select.Option value={3}>不合格</Select.Option>
            <Select.Option value={4}>极差</Select.Option>
          </Select>
          <Input
            placeholder="查询企业名称"
            style={{ marginLeft: 10, width: 200 }}
            value={data.keyword}
            onChange={onChangeKeyword}
          ></Input>
          <Button type="primary" icon={<SyncOutlined />} style={{ marginLeft: 10 }} onClick={search}>
            查询
          </Button>
        </div>
      </div>
      <div className={styles.table}>
        <Table columns={columns} dataSource={data.list} />
      </div>
      <div className={styles.paging}>
        <Pagination
          current={data.page}
          total={data.total}
          pageSize={data.size}
          showSizeChanger
          onChange={handleChangeSize}
        />
      </div>
      <Modal
        title="企业信息-企业画像详情"
        open={data.visible}
        onCancel={() => handleChangeVisible(false)}
        onOk={() => handleChangeVisible(false)}
        okText="确定"
        footer={(_, { OkBtn }) => (
          <>
            <OkBtn />
          </>
        )}
      >
        <Form
          className={[styles.form, styles.noMessage].join(' ')}
          labelCol={{ span: 7 }}
          style={{ padding: '20px 10px' }}
        >
          <Form.Item label="企业名称" style={{ marginBottom: 0 }}>
            {'AAAY企业'}
          </Form.Item>
          <Form.Item label="企业档案画像" style={{ marginBottom: 0 }}>
            {'企业规模：大型企业，人数：34人，车辆：23辆'}
          </Form.Item>
          <Form.Item label="企业消防培训" style={{ marginBottom: 0 }}>
            {'5次  25人参加  90%合格，得 8分'}
          </Form.Item>
          <Form.Item label="企业消防演练" style={{ marginBottom: 0 }}>
            {'5次  25人参加  90%合格，得 8分'}
          </Form.Item>
          <Form.Item label="企业员工违规行为" style={{ marginBottom: 0 }}>
            {'15次  得 5分'}
          </Form.Item>
          <Form.Item label="企业车辆违规" style={{ marginBottom: 0 }}>
            {'15次  得 5分'}
          </Form.Item>
          <Form.Item label="企业设备维护" style={{ marginBottom: 0 }}>
            {'0过期，28件已维护，得 15分'}
          </Form.Item>
          <Form.Item label="企业消防资产保养" style={{ marginBottom: 0 }}>
            {'2件保养过期，28件保养期有效，得 12分'}
          </Form.Item>
          <div className={styles.split}></div>
          <Form.Item label="综合得分" style={{ marginBottom: 0 }}>
            {'计算公式，得出综合得分：88分'}
          </Form.Item>
          <div className={styles.split}></div>
          <Form.Item label="安全等级" style={{ marginBottom: 0 }}>
            {'优秀，排名12名'}
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
